import { useSnapshot } from 'valtio';
import { Select } from 'szcd';
import { type Option } from '../../../../types';

export interface IView {
  value: Array<string|Option>;
  options: Option[];
  onChange: (value: Option[]) => void;
}

const Role: React.FC<{ service: IView }> = ({
  service,
  ...restProps
}) => {
  const snap = useSnapshot(service);
  return (
    <Select
      allowClear
      showSearch
      mode="multiple"
      value={snap.value}
      options={snap.options && service.options}
      labelInValue
      onChange={(e) => {
        service.onChange?.(e as Option[]);
      }}
    />
  );
};

export default Role;
